<template>
  <header >
    <img src="@/assets/beijing.png" alt="">
      <div class="top">
        <div class="left">
          <p >
            <span class="iconfont icon-shouhuodizhi"></span>
            <span>立人科技 &gt;</span>
          </p>
          <h6>西安枫林绿洲店</h6>
        </div>
        <div class="right">
          <span>
            <p class="iconfont icon-tiaoma " id="tiaoma"></p>
            <p>会员码</p>
          </span>
          <span @click="fun()">
              <p class="iconfont icon-wodeyouhuiquan"></p>
              <p>优惠券</p>
            </span>
            <span>
              <p class="iconfont icon-tishi"></p>
              <p>通知</p>
            </span>
        </div>
      </div>
      <div class="bottom" >
        <div class="jishi"> 
          <img src="@/assets/jishi.png" alt="">
        </div>
        <div class="sousuo"  placeholder='鲜嫩草莓 惹人爱~' >
            <span class="iconfont icon-fangdajing"></span>
            <button>搜索</button>
        </div>
      </div>
  </header>
</template>

<script>
export default {
  methods:{
    fun(){
      this.$router.push("/quan")
    }
  }
  
}
</script>

<style  scoped>
header{
    width: 100%;
    height: 1.2rem;
    position: relative;
  }
header>img{
  position:absolute;
  width: 100%;
  height: 1.18rem;
}
.top{
  width: 100%;
  height: .6rem;
  color: white;
  position: absolute;
  top: 0;
}
.top .left{
  float: left;
  margin-top: .1rem;
  margin-left: .1rem;
}
.top .left h6{
  text-align: center;
  width: 0.95rem;
  height: .2rem;
  margin-top: .05rem;
  margin-left: .15rem;
  line-height: .2rem;
  background: rgba(128, 128, 128, 0.603);
}
.top .right{
  float: right;
  display: flex;
  text-align: center;
  margin-top: .08rem;
  margin-right: .1rem;
}
.top .right span>p{
  margin-left:.15rem;
}
.top .right span>p:nth-child(1){
  font-size: .24rem;
}
.top .right span>p:nth-child(2){
  font-size: .14rem;
}
.top .right #tiaoma{
  font-size: .18rem;
  margin-top: .03rem;
  margin-bottom: .03rem;
}
.bottom{
  height: .6rem;
  position: relative;
  position: absolute;
  top: .6rem;
  z-index: 2;
}
.bottom .jishi{
 position: absolute;
 top: .14rem;
 margin-left: .08rem;
}
.bottom img{
  height: .28rem;
}
.bottom .sousuo{
  width: 2.5rem;
  height: .3rem;
  border: .01rem solid black;
  line-height: .3rem;
  border-radius: .15rem ;
  margin-left: 1.18rem; 
  margin-top: .14rem;
  background: white;
}
.bottom .sousuo span{
  font-size: .2rem;
  margin-left: .05rem;
}
.bottom .sousuo button{
  float: right;
  display: inline-block;
  text-align: center;
  width: .5rem;
  height: .24rem;
  line-height: .24rem;
  margin-right: .03rem;
  border: .01rem solid black;
  border-radius: .15rem;
  margin-top:.03rem ;
  background: rgb(248,110,37);
  color: white;
  font-weight: 600;
  border: none;
}
</style>